<template>
    <a-space direction="vertical" fill size="large">
        <div></div>
        <a-row justify="space-around">
            <a-col :span="14" class="box">
                <a-row justify="space-around">
                    <a-col :span="5" class="center">
                        <div class="center icon">
                            <icon-bytedance-color size="70" />
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="center">
                            <div class="title">入库数量</div>
                            <div class="number">836</div>
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="center">
                            <div class="title">入库金额</div>
                            <div class="number" style="color: rgba(67, 101, 220, 1);">---</div>
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="center">
                            <div class="title">入库记录(总计)</div>
                            <div class="number" style="color: rgba(113, 214, 213, 1);">168</div>
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="center">
                            <div class="title">其他统计</div>
                            <div class="number" style="color: rgba(250, 57, 57, 1);">---</div>
                        </div>
                    </a-col>
                </a-row>
            </a-col>
            <a-col :span="8" class="box">
                <a-row justify="space-around">
                    <a-col :span="5" class="center">
                        <div class="center icon">
                            <icon-bytedance-color size="70" />
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="center">
                            <div class="title">数量统计</div>
                            <div class="number">---</div>
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="center">
                            <div class="title">金额统计</div>
                            <div class="number" style="color: rgba(67, 101, 220, 1);">---</div>
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="center">
                            <div class="title">记录总数</div>
                            <div class="number" style="color: rgba(113, 214, 213, 1);">---</div>
                        </div>
                    </a-col>
                    <a-col :span="4">
                        <div class="center">
                            <a-popover>
                                <a-button type="primary" shape="circle" size="large" @click="openInNoteDailog">
                                    <icon-plus />
                                </a-button>
                                <template #content>
                                    <p>
                                        添加一条记录
                                    </p>
                                </template>
                            </a-popover>

                        </div>
                    </a-col>
                </a-row>
            </a-col>
        </a-row>
        <a-row justify="space-around">
            <a-col :span="23">
                <div class="content">
                    <div class="tableTool">
                        <a-row>
                            <a-col :span="5" class="tool">
                                <div class="toolTitle">物品名称</div>
                                <a-input
                                    :style="{ width: '8vw', height: '4vh', border: '1px solid rgba(148, 174, 217, 1)', background: '#fff' }"
                                    placeholder="请输入" allow-clear />
                            </a-col>
                            <a-col :span="5" class="tool">
                                <div class="toolTitle">部门名称</div>
                                <a-input
                                    :style="{ width: '8vw', height: '4vh', border: '1px solid rgba(148, 174, 217, 1)', background: '#fff' }"
                                    placeholder="请输入" allow-clear />
                            </a-col>
                            <a-col :span="12"></a-col>
                            <a-col :span="2" class="tool" style="justify-content: flex-end;">
                                <a-button type="primary" size="large" style="width: 4vw;border-radius: 10px;height: 4vh;">
                                    <template #icon>
                                        <icon-search size="24" />
                                    </template>
                                </a-button>
                            </a-col>
                        </a-row>
                    </div>
                    <div class="table">
                        <a-table :columns="columns" :data="data" :pagination="false" :bordered="false">
                            <template #action="{ record }">
                                <div class="action">
                                    <a-button type="text">
                                        <icon-file />
                                    </a-button>
                                    <a-button type="text" status="warning">
                                        <icon-edit />
                                    </a-button>
                                    <a-button type="text" status="danger">
                                        <icon-delete />
                                    </a-button>
                                </div>

                            </template>
                        </a-table>
                    </div>
                    <div class="tableBottom">
                        <a-pagination :total="queryPage.total" @change="updatePageData" @page-size-change="changePageSize"
                            show-total show-page-size />
                    </div>
                </div>
            </a-col>
        </a-row>
    </a-space>
    <a-modal v-model:visible="newInNoteDailogVisible" @ok="submitInNote" @cancel="cancelInNote">
        <template #title>
            添加新的入库记录
        </template>
        <div>
            <a-form :model="newInNote" layout="vertical">
                <a-form-item field="goodsUid" tooltip="物品" label="物品名称">
                    <a-select v-model="newInNote.goodsUid" placeholder="请选择物品">
                        <a-option v-for="item of goodsOptions" :value="item.uid" :label="item.name" />
                    </a-select>
                </a-form-item>
                <a-form-item field="actionNumber" label="操作数量" tooltip="操作数量，默认为1">
                    <a-input-number :min="0" v-model="newInNote.actionNumber" placeholder="请输入被操作的物品数量..." />
                </a-form-item>
                <a-form-item field="actionUserName" label="经办人" tooltip="经办人信息，应为人员姓名">
                    <a-input v-model="newInNote.actionUserName" placeholder="输入姓名..." />
                </a-form-item>
                <a-form-item field="manageUserName" label="负责人" tooltip="负责人信息，应为人员姓名">
                    <a-input v-model="newInNote.manageUserName" placeholder="输入姓名..." />
                </a-form-item>
                <a-form-item field="description" label="备注" tooltip="物品备注">
                    <a-input v-model="newInNote.description" placeholder="输入物品备注..." />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>
<script setup>
import { post, get } from "@/service/baseService.js"
import { Notification } from '@arco-design/web-vue';
import { reactive, ref } from 'vue';
const newInNoteDailogVisible = ref(false)
const queryPage = reactive({
    page: 1,
    page_size: 10,
    total: 50,
    start: 1,
    end: 11
})
const newInNote = reactive({
    goodsUid: "",
    actionNumber: 1,
    actionUserName: "",
    manageUserName: "",
    description: ""
})
function addNewNote() {
    post("manage/add/in/notes", newInNote).then((res) => {
        if (res.data.code == 200) {
            Notification.success({
                title: '提示',
                content: res.data.message,
            })
            initPageData()
        } else {
            Notification.error({
                title: '添加失败',
                content: res.data.message,
            })
        }

    }).catch((res) => {
        Notification.error({
            title: '错误提示',
            content: "网络或服务器异常！",
        })
    })
}
var goodsOptions = reactive([]);
function getGoodsOptions() {
    get("manage/goods/options").then((res) => {
        if (res.data.code == 200) {
            goodsOptions = res.data.data.list
        } else {
            Notification.error({
                title: '提示',
                content: res.data.message,
            })
        }
    }).catch((res) => {
        //   console.log(res);
        Notification.error({
            title: '错误提示',
            content: "网络或服务器异常！",
        })
    })
}
const columns = [
    {
        title: '物品名称',
        dataIndex: 'goods_name',
        align: "center"
    },
    {
        title: '数量',
        dataIndex: 'action_number',
        align: "right"
    },
    {
        title: '单位',
        dataIndex: 'unit',
        align: "center"
    },
    {
        title: '库存',
        dataIndex: 'end_count',
        align: "right"
    },
    {
        title: '操作人',
        dataIndex: 'action_user_name',
        align: "center"
    },
    {
        title: '负责人',
        dataIndex: 'manage_user_name',
        align: 'center'
    },
    {
        title: '入库时间',
        dataIndex: 'date',
        align: 'center',
        width: 200
    },
    {
        title: "备注",
        dataIndex: "description",
        ellipsis: true,
        tooltip: true
    }
];
var data = reactive([]);

function openInNoteDailog() {
    getGoodsOptions()
    newInNoteDailogVisible.value = true
}
function submitInNote() {
    addNewNote()
    newInNoteDailogVisible.value = false
}
function cancelInNote() {
    newInNoteDailogVisible.value = false
}

function updatePageData(page) {
    queryPage.page = page
    cacularQuery()
}
function cacularQuery() {
    queryPage.start = ((queryPage.page - 1) * queryPage.page_size) + 1
    queryPage.end = queryPage.start + queryPage.page_size
    initPageData()
}
function changePageSize(size) {
    queryPage.page_size = size
    cacularQuery()
}
function initPageData() {
    post("manage/in/notes/page", queryPage).then((res) => {
        if (res.data.code == 200) {
            queryPage.total = res.data.data.total
            queryPage.start = res.data.data.start
            queryPage.page = res.data.data.page
            queryPage.page_size = res.data.data.page_size
            data = res.data.data.list
        } else {
            Notification.error({
                title: '提示',
                content: res.data.message,
            })
        }
    }).catch((res) => {
        //   console.log(res);
        Notification.error({
            title: '错误提示',
            content: "网络或服务器异常！",
        })
    })
}
initPageData()
</script>
<style scoped>
.box {
    height: 14vh;
    border-radius: 10px;
    background-color: #fff;
}

.center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 14vh;
}

.icon {
    border-radius: 10px;
    height: 10vh;
    width: 10vh;
    overflow: hidden;
    /* background: rgb(216, 228, 240); */
}

.title {
    color: rgba(148, 174, 217, 1);
    margin-bottom: 10px;
}

.number {
    font-size: 36px;
    font-weight: 500;
    color: rgba(255, 178, 30, 1);
}

.content {
    height: 68vh;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tableTool {
    height: 8vh;
    width: 98%;
    /* background-color: aquamarine; */
}

.table {
    height: 53vh;
    width: 98%;

    /* background-color: blueviolet; */

}

.tableBottom {
    height: 7vh;
    width: 98%;
    /* background-color: antiquewhite; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tool {
    height: 8vh;
    display: flex;
    /* flex-direction: row; */
    justify-content: flex-start;
    align-items: center;
}

.toolTitle {
    margin-right: 1vw;
}

.input {
    width: 10vw;
    height: 6vh;
}

.action {
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;
}</style>